<!--  包含了头部导航栏    -->
<template>

  <div>

    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
      <div class="container">
        <!--  （品牌）图片Logo  -->
        <a href="" class="navbar-brand">
          <img id="light-logo" src="../../public/image/logo/logo.png" height="58px" class="d-inline-block align-top"
               alt="Toolines" title="Toolines"/>
        </a>

        <!--  手机端显示导航栏的那个按钮 -->
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!--  导航栏主体区域   -->
        <div class="collapse navbar-collapse" id="navbarNav">

          <!--  列表  -->
          <div class="navbar-nav mr-auto">
            <div class="nav-item">
              <a href="/onlinetool/#/" class="nav-link active">首页</a>
            </div>
            <div class="nav-item" >
              <!--  a链接的地址上线之后要修改 -->
              <a href="/onlinetool/#/guess" class="nav-link">默契测试</a>
            </div>
            <div class="nav-item">
              <a href="/onlinetool/#/component" class="nav-link">留言板</a>
            </div>
          </div>

          <!--  黑暗模式，光明模式按钮 -->
          <div class="darkmode">
            <!--                    <a href="javascript:switchNightMode()" target="_self" class=""><i class="fa fa-moon-o"></i></a>-->
            <a href="#" @click="changeModel" v-on:click.prevent>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yueliang"></use>
              </svg>
            </a>
          </div>

          <!--  搜索框 -->
          <form action="" class="form-inline my-2 my-md-0">
            <input type="text" class="form-control mr-sm-2" placeholder="请输入关键字">
            <button class="btn btn-outline-success my-2 my-md-0">搜索</button>
          </form>

          <!--  登录注册按钮  -->
          <button id="login-btn" type="button" @click="toLR" class="btn btn-info my-2 my-md-0 ml-3 login-btn">登录/注册</button>
          <!--          <button id="login-bt2n" type="button" @click="toLR" class="btn btn-info my-2 my-md-0 ml-3">登录/注册</button>-->

<!--          <a href="#" id="username" class="btn badge-success username ml-2">欢迎您：jacklin</a>-->

          <div id="username" class="dropdown username ml-2">
            <button class="btn btn-secondary dropdown-toggle btn-info" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              欢迎你：{{ username }}
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a @click="destroyLogin" class="dropdown-item" href="#" v-on:click.prevent>注销登录</a>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!--  顶部进度条（滚动条） -->
    <div class="my-top">
      <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>


    <!--  回到顶端  -->
    <div class="to-top" @click="toTop">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-huidaodingduan"></use>
      </svg>
    </div>


    <!--  内容主体区域，使用路由占位符  -->
    <router-view></router-view>

    <!--    底部-->
    <div class="my-footer">
      <div class="container text-center">
        <p class="my-time">
          本站自2020-10-12运行以来，<span id="time"></span>
        </p>
        <p class="my-info">
          © 2020 | ToolLines | <a href="https://github.com/LinSir12138/MyBlog" title="https://github.com/LinSir12138/MyBlog" target="_blank">本博客已开源</a> | <a href="http://www.beian.miit.gov.cn/">赣ICP备20003376号</a>
        </p>
      </div>
    </div>


    <!--  选中文本，弹框部分         -->
    <div @click="toBaidu" id="to-baidu" title="百度一下">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-icon-test"></use>
      </svg>
    </div>
    <div id="baidu-fanyi" title="翻译一下">
      <svg @click="fanYi" class="icon" aria-hidden="true">
        <use xlink:href="#icon-fanyi2"></use>
      </svg>
    </div>
    <div @click="copy" id="copy-text" title="复制到剪切板">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-fuzhi"></use>
      </svg>
    </div>
    <!--  用来临时保存选中的文本，也可以放在 Vue 中的 data 中，都可以。-->
    <textarea id="hide-text" style="display: none"></textarea>

    <!--  弹出的模态框，用来显示翻译的结果  -->
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">翻译结果展示</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <span class="text-primary">原文：</span>
            <p class="text-success">{{ sourceText }}</p>
            <span class="text-primary">译文：</span>
            <p class="text-success">{{ fanyiObj.dst}}</p>
          </div>
        </div>
      </div>
    </div>


  </div>

</template>

<script>


/*  阿里巴巴矢量图标库的js*/
  import "../assets/js/font_2114600_el41fvm2fht"

  export default {
    data () {
      return {
        /*  翻译之后，返回过来的数据  */
        fanyiObj: {},
        /*  翻译的原文 */
        sourceText: "",
        /*  用户名,登录之后，从 sessionStorage  */
        username: ""
      }
    },
    created () {
      // 在 created 方法里面，可以拿到 token 的值，但是对 style 样式的修改无效，需要在 mounted 方法里面对样式进行修改
    },
    /*  生命周期函数  */
    mounted () {

      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c75c0d5c590875ca83c7eef4b1b99184";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();


      /*  （1） 监听页面的滚动 */
      window.addEventListener('scroll', this.handleScroll);

      /*  （2） 获取 token,username  */
      var token =  window.sessionStorage.getItem("token");
      this.username = window.sessionStorage.getItem("username");
      console.log("username = " + this.username);
      this.changeStyle(token);

      /*  （3）页面底部计时器 倒计时  */
      window.setInterval(function () {
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2020,10,12,0,0,0);
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffDays = Math.floor((diff/days));
        var diffHours = Math.floor((diff-(diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        document.getElementById("time").innerHTML="已运行 " + diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
      }, 1000);

      /*  （4） 监听鼠标点下事件  */
      window.addEventListener("mousedown", function (event) {

        // 获取标签的名称
        var tagName = event.target.localName;
        console.log("id =" + tagName)

        /*  （1）如果点击的是图标，直接返回，不做任何操作。图标点击事件在其他地方处理（其他地方隐藏图标，同时触发事件），这里只负责显示和隐藏 */
        if (tagName === "svg" || tagName === "use") {
          // 说明点击的是显示出来的图标，直接返回，不进行任何操作
          return;
        }


        /*  （2）点击了其他地方，隐藏图标 */
        if (tagName !== "svg" || tagName !== "use") {
          console.log("隐藏");
          ico.style.display = 'none';
          copy.style.display = 'none';
          fanyi.style.display = 'none';
        }
      })


      /*  （5） 百度一下，复制，翻译3个图标*/
      var selectedText = '';
      /*  这个 text 是放在 body 上的id*/
      // var text = document.getElementById('text');
      // console.log(text);
      var ico = document.getElementById('to-baidu');
      var copy = document.getElementById("copy-text");
      var fanyi = document.getElementById("baidu-fanyi");
      var hideText = document.getElementById("hide-text");

      /*  获取选中的文本 */
      window.addEventListener('mouseup', function (event) {
        // 获得选中的文本
        selectedText = window.getSelection().toString();
        /*  （1）*/
        if (selectedText.length !== 0) {

          /*  改变一些样式，让按钮显示出来  */
          ico.style.display = 'block';
          ico.style.position = "fixed"
          ico.style.left = event.pageX + 'px';
          ico.style.top = event.pageY + 'px';

          copy.style.display = 'block';
          copy.style.position = "fixed";
          copy.style.left = (event.pageX + 52) + 'px';
          copy.style.top = event.pageY + 'px';

          fanyi.style.display = 'block';
          fanyi.style.position = "fixed";
          fanyi.style.left = (event.pageX + 100) + 'px';
          fanyi.style.top = event.pageY + 'px';

          // 同时将p 标签里面的内容复制到隐藏 textarea 中
          hideText.innerText = selectedText;
          // console.log("复制的文本值为：" + hideText.innerText);
          hideText.select();

          document.execCommand("copy");

          // console.log(ico);
          // console.log(copy)
        }
      });

    },
    methods: {
      /*  切换黑暗模式，光明模式 */
      changeModel () {
        /*  通过给 body 标签绑定类名来实现  */
        if (this.$('body').hasClass('night')) {
          this.$('body').removeClass('night')
        } else {
          this.$('body').addClass('night')
        }
      },
      /*  回到顶部按钮  */
      toTop () {
        this.$('html,body').animate({
          /*  -71 是因为还要定位一下，头部导航条占了一定的高度  */
          scrollTop: 0
        }, 800)
      },
      /*  监听滚动  */
      handleScroll () {
        /*  获取滚动时的高度  */
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        const height = 1300;    // 滚到最下面是1568
        // console.log("quan" + document.body.scrollHeight);
        // console.log("滚动" + scrollTop);
        var mywidth =  (scrollTop / 1568 * 100) + "%";
        // console.log("mywidth = " +mywidth);
        this.$(".progress-bar").css("width", mywidth);

        /*  (1)只有滚动大于一定距离时，回到顶部按钮才会显示  */
        if (scrollTop > 300) {
          this.$('.to-top').css('display', 'block')
        } else {
          this.$('.to-top').css('display', 'none')
        }

        /*  (2) */
      },
      /*  登录注册页面跳转  */
      toLR() {
        this.$router.push("/login");
      },
      /*  导航栏登录按钮，登录了需要隐藏 */
      changeStyle(token) {
        if (token !== null) {
          console.log("不为空")
          // document.getElementById("login-btn").style.display="none"
          // document.getElementById("username").style.display=""
          this.$(".login-btn").addClass("d-none");
          this.$(".username").addClass("d-inline-block");
        } else {
          console.log("token为空")
          // document.getElementById("login-btn").style.display=""
          // document.getElementById("username").style.display="none"
          this.$(".login-btn").addClass("d-inline-block");
          this.$(".username").addClass("d-none");
        }
      },
      /*  注销登录  */
      destroyLogin() {
        window.sessionStorage.removeItem("token");
        window.sessionStorage.removeItem("username");
        location.reload();
      },
      /*  选中的文字，跳转到百度一下搜索该文本  */
      toBaidu() {
        console.log(this.$('#hide-text').text())

        window.open('https://baidu.com/s?wd=' + this.$('#hide-text').text(), 'target', '');

        // 隐藏弹出的图标
        this.$("#to-baidu").css("display", "none");
        this.$("#copy-text").css("display", "none");
        this.$("#baidu-fanyi").css("display", "none");
      },
      /*  复制到剪切板    */
      copy() {
        this.sourceText = this.$("#hide-text").text();
        // console.log("来到了copy");
        // console.log(this.sourceText);

        /*  将包含选中文本的内容进行选中，然后复制即可 */
        // this.$("#hide-text").select();
        // 用 Jquery 获得的和原生js获得的有一点不一样。
        var hideText = document.getElementById("hide-text");
        // console.log(this.$("#hide-text"));
        // console.log(hideText);
        hideText.select();

        document.execCommand("copy");

        // 隐藏弹出的图标
        this.$("#to-baidu").css("display", "none");
        this.$("#copy-text").css("display", "none");
        this.$("#baidu-fanyi").css("display", "none");

      },
      /*  翻译  */
      async fanYi() {

        this.$('#myModal').modal('show');

        this.sourceText = this.$("#hide-text").text();

        const result = await this.$http.get("http://api.tianapi.com/txapi/fanyi/index", {
          params: {
            text: this.sourceText,
            key: "724f3f4dfa35551529f4e6fbeee06cd5"
          }
        });
        console.log(result);
        this.fanyiObj = result.data.newslist[0];
        console.log(this.fanyiObj.dst);

        // 隐藏弹出的图标
        this.$("#to-baidu").css("display", "none");
        this.$("#copy-text").css("display", "none");
        this.$("#baidu-fanyi").css("display", "none");

      }

    }
  }
</script>

<style scoped>

  /*  宽度小于 500px 时，隐藏该导航条 */
  @media (max-width: 500px) {
    .my-top {
      display: none;
    }
  }

  /*  百度一下，复制按钮 */
  #to-baidu {
    cursor: pointer;
    z-index: 999;
    display: none;
  }

  #copy-text {
    cursor: pointer;
    z-index: 999;
    display: none;

  }

  #baidu-fanyi {
    cursor: pointer;
    z-index: 999;
    display: none;
  }
  /*-----------------------------------------------------*/


  /*  弹出的模态对话框的样式   */
  .modal-body p{
    border-top: 1px solid #ccc;
  }


  /*  顶部进度条   */
  .my-top {
    background-color: #ff3636;
    height: 10px;
    position: fixed;
    top: 93px;
    width: 100%;
    z-index: 999;
  }

  /*  底部  */
  .my-footer {
    border-top: 1px solid #c8cfd9;
    margin-top: 20px;
  }


  /*  图标  */
  .icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  /*  右侧搜索按钮，黑暗模式对应的按钮*/
  .search {
    line-height: 78px;
  }

  .darkmode {
    line-height: 78px;
  }

  /*  回到顶部按钮  */
  .to-top {
    display: none;
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 10;
  }

  .to-top .icon {
    width: 3em;
    height: 3em;
  }

  /*  月亮图标  */
  .darkmode .icon {
    width: 2em;
    height: 2em;
    margin-right: 20px;
  }

  /*    顶部进度条（滚动条）样式  ------------------------------------------------------*/

  /* 滚动条美化css */
  .sidebar::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 5px;
  }

  .sidebar::-webkit-scrollbar-thumb {
    /* background-color: #b6b6b6; */
    background-color: transparent;
    border: 0px solid transparent;
    border-radius: 10px
  }

  .sidebar:hover::-webkit-scrollbar {
    display: inline-block;
  }

  .sidebar:hover::-webkit-scrollbar-thumb {
    background-color: #b6b6b6;
    border: 0px solid #fff;
  }

  .sidebar:hover::-webkit-scrollbar-track {
    background-color: inherit
  }

  .sidebar::-webkit-scrollbar-thumb:active {
    background-color: #9d9d9d
  }

  .sidebar {
    -webkit-overflow-scrolling: touch
  }

  body {
    -webkit-overflow-scrolling: touch
  }

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 5px
  }

  ::-webkit-scrollbar-track {
    background-color: inherit
  }

  ::-webkit-scrollbar-thumb {
    background-color: #b6b6b6;
    border: 0px solid #fff;
    border-radius: 10px
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #9d9d9d
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: #0b87da
  }

  @media screen and (max-width: 48em) { /* 760px */
    .sidebar::-webkit-scrollbar {
      display: none;
      background-color: transparent;
    }

    code::-webkit-scrollbar {
      /* display: none; */
      background-color: transparent;
    }
  }


  /*@media (max-width: 768px) {*/
  /*  form{*/
  /*    display: none;*/
  /*  }*/
  /*}*/
</style>
